<template>
  <div id="category">
    <nav-bar backColor="#ff8198" fontColor="#fff"
      ><div slot="center">商品分类</div></nav-bar
    >
    <div class="category-menu">
      <scroll class="scroll-menu" ref="scrollx">
        <category-menu :menuList="menuList" @menuClick="menuClick">
        </category-menu>
      </scroll>
      <scroll class="scroll-two-category" ref="scrolly">
        <two-category :twoCategory="twoCategory">
          <tab-control
            class="tab-control"
            :tabTitles="tabTitles"
            @changeTabPane="tabItemClick"
            :currentIndex="tabControlIndex"
          ></tab-control>
          <good-list>
            <good-item
              @imgLoad="imgLoad"
              v-for="(item, index) in twoCategoryDetail"
              :key="index"
              :img="item.img"
              :title="item.title"
              :iid="item.iid"
              price="item.price"
              :cfav="Number(item.cfav)"
            ></good-item>
          </good-list>
        </two-category>
      </scroll>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navBar/NavBar";
import TabControl from "components/common/tabControl/TabControl";
import GoodList from "components/content/goodList/GoodList";
import GoodItem from "components/content/goodList/GoodItem";
import Scroll from "components/common/scroll/Scroll";
import CategoryMenu from "./childComps/CategoryMenu.vue";
import TwoCategory from "./childComps/TwoCategory.vue";
import { debounce } from "common/util";
import {
  getCategory,
  getTwoCategory,
  getTwoCategoryDetail,
} from "netword/category";
export default {
  name: "Caregory",
  components: {
    NavBar,
    TabControl,
    GoodList,
    GoodItem,
    Scroll,
    CategoryMenu,
    TwoCategory,
  },
  data() {
    return {
      menuList: [],
      twoCategory: [],
      twoCategoryDetail: [],
      tabTitles: ["综合", "新品", "销量"],
      tabControlIndex: 0,
      tabCurrentType: "pop",
      miniWallkey: 0,
      timer: null,
    };
  },
  created() {
    this._getCategory();
  },
  // mounted() {
  // const refresh=debounce(this.$refs.scrolly.refresh,200);
  // this.$bus.$on("imgLoad", () => {
  //   refresh();
  // });
  // },
  methods: {
    menuClick(maitKey, miniWallkey) {
      this._getTwoCategory(maitKey);
      this.miniWallkey = miniWallkey;
      this.tabControlIndex = 0;
      this.tabCurrentType = "pop";
      this._getTwoCategoryDetail(this.miniWallkey, this.tabCurrentType);
      this.$refs.scrolly.scrollTo(0, 0);
    },
    tabItemClick(index) {
      this.tabControlIndex = index;
      switch (index) {
        case 0:
          this.tabCurrentType = "pop";
          break;
        case 1:
          this.tabCurrentType = "sell";
          break;
        case 2:
          this.tabCurrentType = "new";
          break;
      }
      this._getTwoCategoryDetail(this.miniWallkey, this.tabCurrentType);
    },
    imgLoad() {
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.$refs.scrolly.refresh();
      }, 200);
    },
    _getCategory() {
      getCategory().then((res) => {
        this.menuList = res.data.category.list;
        this.miniWallkey = this.menuList[0].miniWallkey;
        this._getTwoCategory(this.menuList[0].maitKey);
        this._getTwoCategoryDetail(this.miniWallkey, this.tabCurrentType);
        this.$nextTick(() => {
          this.$refs.scrollx.refresh();
        });
      });
    },
    _getTwoCategory(maitKey) {
      getTwoCategory(maitKey).then((res) => {
        this.twoCategory = res.data.list;
        this.$nextTick(() => {
          this.$refs.scrolly.refresh();
        });
      });
    },
    _getTwoCategoryDetail(miniWallkey, type) {
      getTwoCategoryDetail(miniWallkey, type).then((res) => {
        this.twoCategoryDetail = res;
        this.$nextTick(() => {
          this.$refs.scrolly.refresh();
        });
      });
    },
  },
};
</script>

<style scoped>
.category-menu {
  display: flex;
}
.tab-control {
  margin-top: 25px;
}
.scroll-menu,
.scroll-two-category {
  height: calc(100vh - 44px - 49px);
}
.scroll-menu {
  background-color: #f6f6f6;
}
</style>